<template>
  <view>
    <!-- #ifndef  H5 -->
    <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
      <u-navbar
          :is-back="true"
          :title-bold="true"
          :is-fixed="false"
          title-color="#000000"
          :border-bottom="false"
          back-icon-name="arrow-leftward"
          back-icon-color="#000000"
          :background="{ background: 'rgba(256,256, 256,0)' }"
      ></u-navbar>
    </u-sticky>
    <!-- #endif -->
    <view class="user-order">
      <tabs :active="active" @change="changeShow" :config="{itemWidth: 100,bgColor:'',underLineHeight:0,color:'#666666'}" >
        <tab v-for="(item, index) in order" :key="index" :title="item.name" :name="item.type" :style="{}">
          <order-list v-if="item.isShow" :order-type="item.type" :ref="'order' + item.type"></order-list>
        </tab>
      </tabs>
    </view>
  </view>
</template>
<script>

import {orderType} from '@/utils/type';

export default {
  data() {
    return {
      navBg: 0,
      active: orderType.ALL,
      order: [{
        name: '全部',
        type: orderType.ALL,
        isShow: false
      }, {
        name: '待付款',
        type: orderType.PAY,
        isShow: false
      }, {
        name: '待确认',
        type: orderType.WAIT_CONFIRM,
        isShow: false
      }, {
        name: '待接单',
        type: orderType.WAIT_ACCEPT,
        isShow: false
      }, {
        name: '服务中',
        type: orderType.IN_SERVICE,
        isShow: false
      }, {
        name: '待完成',
        type: orderType.WAIT_FINISH,
        isShow: false
      }, {
        name: '已完成',
        type: orderType.COMPLETED,
        isShow: false
      }, {
        name: '售后',
        type: orderType.REFUND,
        isShow: false
      }]
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    const {order} = this
    let type = options.type || orderType.ALL;
    let index = order.findIndex(item => item.type == type)
    this.changeShow(index);
  },

  onPullDownRefresh: function () {
    const {active, order} = this
    console.log(this.$refs['order' + order[active].type])
    this.$refs['order' + order[active].type][0].reflesh()
  },

  onReachBottom: function () {
    const {active, order} = this
    console.log(this.$refs['order' + order[active].type])
    this.$refs['order' + order[active].type][0].getOrderListFun()
  },
  methods: {
    changeShow(index) {
      if (index != -1) {
        this.active = index
        this.order[index].isShow = true
      }
    },
  }
};
</script>
<style lang="scss">
page {
  background-image: url("../../static/images/my_bg.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
}

</style>